<template>
  <div>
    <el-card style="margin-bottom:10px">
      <!-- 查询部分 -->
      <query-conponent
        :tableData="tableData"
        @PagingQueryAssignment="PagingQueryAssignment"
        @ResetData="
          (value) => {
            if (value) {
              this.ResetData();
            }
          }
        "
        @isDialog="
          (value) => {
            this.isDialog = value;
          }
        "
        @Modify="
          (value) => {
            this.Modify = value;
          }
        "
        @isEditTable="
          (value) => {
            this.isEditTable = value;
          }
        "
      />
    </el-card>

    <el-card>
      <!-- 主体列表 -->
      <main-part
        :paging="paging"
        :name="name"
        @isDialog="
          (value) => {
            this.isDialog = value;
          }
        "
        @isDialogSee="
          (value) => {
            this.isDialogSee = value;
          }
        "
        @Modify="
          (value) => {
            this.Modify = value;
          }
        "
        @isEditTable="
          (value) => {
            this.isEditTable = value;
          }
        "
        @ruleForm="
          (value) => {
            RuleFormAssignment(value);
          }
        "
        @ReplaceType="
          (value) => {
            if (value) {
              this.ReplaceType();
            }
          }
        "
        @inquire="
          (value) => {
            if (value) {
              this.DeletedPage();
            }
          }
        "
      />

      <!-- 分页 -->
      <paging-component
        :name="name"
        :totalCount="6"
        @totalCount="
          (value) => {
            (this.totalCount = value), this.PagingQuery();
          }
        "
        @NamePageSize="
          (value) => {
            name.pageSize = value;
          }
        "
        @NamePageNum="
          (value) => {
            (name.pageNum = value), this.PagingQuery();
          }
        "
      />

      <!-- 弹出层 -->
      <popup-component
        :Modify="Modify"
        :isDialog="isDialog"
        :ruleForm="ruleForm"
        :isEditTable="isEditTable"
        :itemtableData="itemtableData"
        @ResetData="
          (value) => {
            if (value) {
              this.ResetData();
            }
          }
        "
        @isDialog="
          (value) => {
            this.isDialog = value;
          }
        "
        @dialogVisible="
          (value) => {
            this.dialogVisible = value;
          }
        "
        @inquire="
          (value) => {
            if (value) {
              this.inquireEmpty();
            }
          }
        "
      />
    </el-card>

    <!-- <el-button @click="randomString(16)" type="primary" size="small">点击添加</el-button>
    <br>
    <br>
    <el-button @click="sfd()" type="primary" size="small">点击跳转</el-button>
    <br>
    <br>
    <span>{{ result }}</span> -->
  </div>
</template>

<script>
// import {
// DropDownList,
// PagingQuer,
//   isLogin,
// } from "@/assets/js/api";
// import commentFn from "./components/conmmen";
import PopupComponent from "./components/PopupComponent";
import QueryConponent from "./components/QueryConponent";
import MainPart from "./components/MainPart";
import PagingComponent from "@/components/PagingComponent";
export default {
  components: {
    PopupComponent,
    QueryConponent,
    MainPart,
    PagingComponent,
  },
  data() {
    return {
      // 要随机的数
      str: "0123456789abcdefghijklmnopqrstuvwxyz",
      // 返回的随机数
      result: "",
      // 判断条件
      only: 0,
      //总页数
      totalCount: null,
      // 添加和编辑
      Modify: "",
      //弹窗表单
      ruleForm: {
        id: "",
        dataSourceName: "",
        dataSourceUrl: "",
        dbName: "",
        dataSourceUserName: "",
        dataSourceType: "",
        dataSourcePwd: "",
        dataSourceDesc: "",
      },
      // 是否禁用
      isEditTable: false,
      // v-if
      dialogVisible: false,
      // 向后台传的分页数据
      name: {
        pageNum: 1,
        pageSize: 10,
        dataSourceType: null,
      },
      // 当前页
      pageNum: 1,
      // 每页条数
      PageSize: 10,
      //表格数据
      tableData: [],
      // 添加里的列表
      itemtableData: [],
      // 列表数据
      paging: [],
      // 弹出层
      isDialog: false,
      // 查看
      isDialogSee: false,
    };
  },
  // async created() {
  //   let res = await isLogin();
  //   if (res.code == 0) {
  //     this.souarData(); //初始化列表接口调用
  //     this.PagingQuery();
  //   } else {
  //     this.login();
  //   }
  // },
  methods: {
    // 跳转数据源配置
    sfd() {
      this.$router.push("/conf-center/dataSources");
    },
    // 生成随机字符串
    // randomString(length) {
      //   只执行一次
      //   this.only += 1;
      //   if (this.only == 1) {
      //     for (var i = length; i > 0; --i) {
      //       this.result += this.str[Math.floor(Math.random() * this.str.length)];
      //     }
      //   }

      // 结合上下两个，当前执行完才能继续执行下一个
      // this.only += 1;
      // if (this.only == 1) {
        // setTimeout(() => {
        //   for (var i = length; i > 0; --i) {
        //     this.result +=
        //       this.str[Math.floor(Math.random() * this.str.length)];
        //   }
        //   this.only = 0;
        // }, 1000);
      // }

      // 延时执行
      // setTimeout(() => {
      //   for (var i = length; i > 0; --i) {
      //     this.result += this.str[Math.floor(Math.random() * this.str.length)];
      //   }
      // }, 1000);
    // },
    // 删除的分页
    DeletedPage() {
      this.totalCount -= 1;
      if (
        this.totalCount == (this.name.pageNum - 1) * this.name.pageSize &&
        this.totalCount != 0
      ) {
        this.name.pageNum -= 1;
        this.PagingQuery();
      } else {
        this.PagingQuery();
      }
    },
    // 每条数据
    RuleFormAssignment(row) {
      this.ruleForm = {
        id: row.id,
        dataSourceName: row.dataSourceName,
        dataSourceUrl: row.dataSourceUrl,
        dbName: row.dbName,
        dataSourceUserName: row.dataSourceUserName,
        dataSourceType: row.dataSourceType,
        dataSourcePwd: row.dataSourcePwd,
        dataSourceDesc: row.dataSourceDesc,
      };
    },
    // 搜索
    PagingQueryAssignment(res) {
      this.name.pageNum = res.pageNum;
      this.name.pageSize = res.pageSize;
      this.name.dataSourceType = res.dataSourceType;
      this.PagingQuery();
    },
    // 单点登录地址
    login() {
      let url =
        "/data-conf-center-server/login?referUrl=" + window.location.href;
      window.location.href = url;
    },
    // 清空表单数据
    ResetData() {
      this.ruleForm = {
        id: "",
        dataSourceName: "",
        dataSourceUrl: "",
        dbName: "",
        dataSourceUserName: "",
        dataSourceType: "",
        dataSourcePwd: "",
        dataSourceDesc: "",
      };
    },
    // 无条件页面更新
    inquireEmpty() {
      this.name.pageNum = 1;
      this.name.pageSize = 10;
      this.name.dataSourceType = "";
      this.PagingQuery();
    },

    // 数据源分页查询
    // async PagingQuery() {
    //   let res = await PagingQuer(this.name);
    //   if (res.code == 0) {
    //     this.totalCount = res.data.totalCount;
    //     res.data.list.forEach((e) => {
    //       e.isClass = "isStyle";
    //     });
    //     this.paging = res.data.list;
    //     this.ReplaceId();
    //   } else {
    //     this.$message({
    //       showClose: true,
    //       message: res.msg,
    //       type: "error",
    //     });
    //   }
    // },
    // 将id替换成类型
    // ReplaceId() {
    //   for (let i = 0; i < this.paging.length; i++) {
    //     commentFn.data.forEach((e, s) => {
    //       this.paging[i].dataSourceType == commentFn.data[s].id
    //         ? (this.paging[i].dataSourceType = commentFn.data[s].name)
    //         : "";
    //     });
    //   }
    // },
    // 将类型替换成id
    // ReplaceType() {
    //   let item = this.ruleForm;
    //   commentFn.data.forEach((e, s) => {
    //     item.dataSourceType == commentFn.data[s].name
    //       ? (item.dataSourceType = commentFn.data[s].id)
    //       : "";
    //   });
    // },
    // async souarData() {
    //   //调用列表接口
    //   let res = await DropDownList();
    //   if (res.code == 0) {
    //     this.tableData = res.data;
    //     this.itemtableData = res.data;
    //   } else {
    //     this.$message({
    //       showClose: true,
    //       message: res.msg,
    //       type: "error",
    //     });
    //   }
    // },
  },
};
</script>
<style scoped>
.onebox {
  margin-left: 30px;
}
::v-deep .el-input__inner {
  height: 30px;
}

.el-table {
  width: auto;
}
.add_to {
  color: #000;
  margin-left: 50px;
}
</style>
